<template>
	<view class="group">
		<view class="header">
			<text class="title">拼团</text>
		</view>
		
		<view class="tabs">
			<view 
				v-for="tab in tabs" 
				:key="tab.id"
				class="tab-item"
				:class="{ active: activeTab === tab.id }"
				@click="switchTab(tab.id)"
			>
				<text>{{ tab.name }}</text>
			</view>
		</view>
		
		<view class="content">
			<!-- 进行中的拼团 -->
			<view v-if="activeTab === 1" class="ongoing-groups">
				<view v-for="group in ongoingGroups" :key="group.id" class="group-item">
					<image class="group-image" :src="group.image" mode="aspectFill"></image>
					<view class="group-info">
						<text class="group-name">{{ group.name }}</text>
						<view class="group-progress">
							<text class="progress-text">还差{{ group.remaining }}人成团</text>
							<view class="progress-bar">
								<view class="progress-fill" :style="{ width: group.progress + '%' }"></view>
							</view>
						</view>
						<view class="group-time">
							<text>剩余时间：{{ group.remainingTime }}</text>
						</view>
					</view>
					<button class="join-btn" @click="joinGroup(group)">去拼团</button>
				</view>
			</view>
			
			<!-- 我的拼团 -->
			<view v-if="activeTab === 2" class="my-groups">
				<view v-for="group in myGroups" :key="group.id" class="group-item">
					<image class="group-image" :src="group.image" mode="aspectFill"></image>
					<view class="group-info">
						<text class="group-name">{{ group.name }}</text>
						<text class="group-status" :class="getStatusClass(group.status)">
							{{ getStatusText(group.status) }}
						</text>
						<view class="group-members">
							<text>参与人数：{{ group.currentMembers }}/{{ group.totalMembers }}</text>
						</view>
					</view>
					<button class="detail-btn" @click="viewGroupDetail(group)">查看详情</button>
				</view>
			</view>
			
			<!-- 拼团商品 -->
			<view v-if="activeTab === 3" class="group-products">
				<view v-for="product in groupProducts" :key="product.id" class="product-item">
					<image class="product-image" :src="product.image" mode="aspectFill"></image>
					<view class="product-info">
						<text class="product-name">{{ product.name }}</text>
						<view class="price-section">
							<text class="group-price">拼团价：¥{{ product.groupPrice }}</text>
							<text class="original-price">原价：¥{{ product.originalPrice }}</text>
						</view>
						<view class="group-info">
							<text>{{ product.totalMembers }}人团</text>
							<text>已拼{{ product.soldCount }}件</text>
						</view>
					</view>
					<button class="start-group-btn" @click="startGroup(product)">发起拼团</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'

const tabs = ref([
	{ id: 1, name: '进行中' },
	{ id: 2, name: '我的拼团' },
	{ id: 3, name: '拼团商品' }
])

const activeTab = ref(1)

const ongoingGroups = ref([
	{
		id: 1,
		name: '经典拿铁咖啡拼团',
		image: '/static/goods/goods09.jpg',
		currentMembers: 3,
		totalMembers: 5,
		remaining: 2,
		progress: 60,
		remainingTime: '02:15:30'
	},
	{
		id: 2,
		name: '美味蛋糕拼团',
		image: '/static/goods/goods10.jpg',
		currentMembers: 1,
		totalMembers: 3,
		remaining: 2,
		progress: 33,
		remainingTime: '01:45:20'
	}
])

const myGroups = ref([
	{
		id: 1,
		name: '拿铁咖啡拼团',
		image: '/static/goods/goods11.jpg',
		status: 1, // 1-进行中 2-成功 3-失败
		currentMembers: 3,
		totalMembers: 5
	},
	{
		id: 2,
		name: '蛋糕拼团',
		image: '/static/goods/goods12.jpg',
		status: 2,
		currentMembers: 3,
		totalMembers: 3
	}
])

const groupProducts = ref([
	{
		id: 1,
		name: '经典拿铁咖啡',
		image: '/static/goods/goods13.jpg',
		groupPrice: 20,
		originalPrice: 28,
		totalMembers: 5,
		soldCount: 128
	},
	{
		id: 2,
		name: '美味蛋糕',
		image: '/static/goods/goods14.jpg',
		groupPrice: 35,
		originalPrice: 48,
		totalMembers: 3,
		soldCount: 89
	}
])

const switchTab = (tabId) => {
	activeTab.value = tabId
}

const joinGroup = (group) => {
	uni.showModal({
		title: '加入拼团',
		content: `确定要加入【${group.name}】拼团吗？`,
		success: (res) => {
			if (res.confirm) {
				uni.showToast({
					title: '加入成功',
					icon: 'success'
				})
			}
		}
	})
}

const viewGroupDetail = (group) => {
	uni.showToast({
		title: '查看拼团详情',
		icon: 'none'
	})
}

const startGroup = (product) => {
	uni.showModal({
		title: '发起拼团',
		content: `确定要发起【${product.name}】拼团吗？`,
		success: (res) => {
			if (res.confirm) {
				uni.showToast({
					title: '发起成功',
					icon: 'success'
				})
			}
		}
	})
}

const getStatusText = (status) => {
	const statusMap = {
		1: '拼团中',
		2: '拼团成功',
		3: '拼团失败'
	}
	return statusMap[status] || '未知'
}

const getStatusClass = (status) => {
	const classMap = {
		1: 'ongoing',
		2: 'success',
		3: 'failed'
	}
	return classMap[status] || ''
}
</script>

<style scoped>
.group {
	background: #f5f5f5;
	min-height: 100vh;
	padding: 20rpx;
}

.header {
	text-align: center;
	padding: 30rpx 0;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.tabs {
	display: flex;
	background: white;
	border-radius: 12rpx;
	margin-bottom: 30rpx;
	overflow: hidden;
}

.tab-item {
	flex: 1;
	text-align: center;
	padding: 25rpx;
	font-size: 28rpx;
	color: #666;
	transition: all 0.3s;
}

.tab-item.active {
	color: #ff6b6b;
	background: #fff5f5;
	font-weight: bold;
}

.content {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.group-item,
.product-item {
	background: white;
	border-radius: 16rpx;
	padding: 30rpx;
	display: flex;
	align-items: center;
	gap: 20rpx;
}

.group-image,
.product-image {
	width: 120rpx;
	height: 120rpx;
	border-radius: 12rpx;
}

.group-info,
.product-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 15rpx;
}

.group-name,
.product-name {
	font-size: 28rpx;
	font-weight: bold;
	color: #333;
}

.group-progress {
	display: flex;
	flex-direction: column;
	gap: 10rpx;
}

.progress-text {
	font-size: 22rpx;
	color: #666;
}

.progress-bar {
	background: #f0f0f0;
	height: 8rpx;
	border-radius: 4rpx;
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	background: #ff6b6b;
	transition: width 0.3s;
}

.group-time {
	font-size: 20rpx;
	color: #999;
}

.group-status {
	font-size: 24rpx;
	font-weight: bold;
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	align-self: flex-start;
}

.group-status.ongoing {
	background: #fff7e6;
	color: #fa8c16;
}

.group-status.success {
	background: #f6ffed;
	color: #52c41a;
}

.group-status.failed {
	background: #fff2f0;
	color: #ff4d4f;
}

.group-members {
	font-size: 22rpx;
	color: #666;
}

.price-section {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.group-price {
	font-size: 26rpx;
	font-weight: bold;
	color: #ff6b6b;
}

.original-price {
	font-size: 22rpx;
	color: #999;
	text-decoration: line-through;
}

.group-info {
	display: flex;
	gap: 20rpx;
	font-size: 20rpx;
	color: #666;
}

.join-btn,
.detail-btn,
.start-group-btn {
	background: #ff6b6b;
	color: white;
	border: none;
	border-radius: 20rpx;
	padding: 20rpx 30rpx;
	font-size: 24rpx;
	font-weight: bold;
	min-width: 140rpx;
}

.detail-btn {
	background: #667eea;
}

.start-group-btn {
	background: #52c41a;
}
</style>